<template>
  <view>
    			<view class="example-body">
    						<uni-datetime-picker type="date" :clear-icon="false" v-model="startdate"  style="width: 150px;" @change="change"/>

    					</view>
              
  <div style="overflow-x: auto;">
                    <uni-table  v-if="columnTitles.length > 0" :loading="loading" cellspacing="0" cellpadding="0" :border="true" class="cla-time-table">            
                    <uni-thead>
                       <uni-tr>
                          <uni-th class="ths">
                            <div class="time">时间</div>
                          </uni-th>
                          <uni-th class="ths"  v-for="item in columnTitles" :key="item.day">
                            <div class="week">{{ item.weekName }} ({{ item.day }}) {{ item.count }}课次</div>
                          </uni-th>
                        </uni-tr>
                        </uni-thead>
                        
                        <uni-tr v-for="item in claTimeContainer" :key="item.time">
                          <uni-td class="ths">
                            <div class="time">{{ item.time }}</div>
                          </uni-td>
                          <td v-for="(claTimeArray, claTimeArrayIdx) in item.claTimeWeekDayMap" :key="claTimeArrayIdx" class="cell">
                            <div v-for="(claTime, claTimeIdx) in claTimeArray" :key="claTime.courseTimeId" class="cla-time-item-container" @click="selected(claTime)">
                              <div  class="cla-time-item success" :style="'background-color: ' + claTime.claColor + ';'">
                                <div class="overflow-ellipsis">{{ claTime.claName }}</div>
                                <div class="overflow-ellipsis">{{ claTime.staffName }} {{ claTime.startTime }} ~ {{ claTime.endTime }}</div>
                                <div class="right-top-tag">
                                  <div v-if="claTime.claTimeStatus === '2'" class="claTimeStatus success"><span>已上课</span></div>
                                  <div v-if="claTime.claTimeStatus === '1'" class="claTimeStatus"><span>未上课</span></div>
                                </div>

                    
                                
     
       
                              </div>
                            </div>

                          </td>
                        </uni-tr>
                   </uni-table> 
                  </div> 
  
                    
                    
                    
                  
  

    		<view>
          
    			<!-- 普通弹窗 -->
    	<!-- 		<uni-popup ref="popup"  type="message" background-color="#fff" > -->
            <u-modal title="课程详情"      v-model="showmode"     :closeOnClickOverlay="true" 
                        :showConfirmButton="true"  @close="closeModal">
                         <u-cell-group>
                    <u-cell-item :title="'班级：'+ claTime.claName+''"    icon="bell"   :iconStyle="{color: colorList()[0]}"></u-cell-item>
                    <u-cell-item :title="'课程：'+ claTime.courseName+''"    icon="bookmark"   :iconStyle="{color: colorList()[6]}"></u-cell-item>
                    <u-cell-item :title="'日期：'+ claTime.claDate+'  '+claTime.weekDay+''"    icon="calendar"   :iconStyle="{color: colorList()[1]}"></u-cell-item>
                    <u-cell-item :title="'时间：'+ claTime.startTime+' '+'~'+claTime.endTime+''"    icon="clock"   :iconStyle="{color: colorList()[4]}"></u-cell-item>
                    <u-cell-item :title="'教师：'+ claTime.staffName+''"    icon="server-man"   :iconStyle="{color: colorList()[3]}"></u-cell-item>
                    <u-cell-item :title="'学生人数：'+ claTime.studentCount+'人'"    icon="account-fill"   :iconStyle="{color: colorList()[5]}"></u-cell-item>
                    <u-cell-item :title="'上课教室：'+ claTime.roomName+''"    icon="home"   :iconStyle="{color: colorList()[2]}"></u-cell-item>
 
                </u-cell-group>
                <!-- <u-icon :size="iconSize" name="calendar" :custom-style="iconStyle"></u-icon> -->
                </u-modal>
  <!--  			</uni-popup> -->
    		</view>
    
    
  </view>
</template>

<script>
  import moment from 'moment'
  
  export default {
    created() {
      this.getList()

    },
    methods: {
      //返回颜色
      colorList() {
          return [
              "#000000", //0
              "#ffaa00", //1
              "#33CC99",
              "#ff5500", //3
              "#789262", //4
              "#66CCCC", //5
              "#9999FF", //6
          ]
      },
      //关闭弹窗
      closeModal(){
          this.showmode=this.showmode==true?false:true;
      },
      // toggle(type) {
      // 				this.type = type
      // 				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      // 				// this.$refs.popup.open(type)
      // 			},
      selected(val) {
        this.claTime=val
        this.showmode=true
        // this.toggle('center')
        
        
         },
 

      
      getList(){
        this.$u.api.searchListForCalendar(
         { // 发送给服务器的数据
                    beginDate:  this.startdate,
                    endDate:  this.endDate,
                    studentId: this.vuex_studentArray != ''?this.studentArray[0].id: null,
                    teacherId:  this.vuex_teacherId != ''?this.vuex_teacherId: null,
          }
          ).then(res => {
            if(res.code == 200){
            
          if (res.data.columnTitles && res.data.claTimeContainer) {
                        this.columnTitles = res.data.columnTitles
                        this.claTimeContainer = res.data.claTimeContainer
                      }
            }
            })
        
        
        
        
        // uni.request({
        //   method: 'GET',
        //    data: { // 发送给服务器的数据
        //               beginDate:  this.startdate,
        //               endDate:  this.endDate,
        //               studentId: 111111343,
        //               // teacherId: this.teacherId,
        //     },
            
        //  success: (response) => {
        //             if (response.data.data.columnTitles && response.data.data.claTimeContainer) {
        //               this.columnTitles = response.data.data.columnTitles
        //               this.claTimeContainer = response.data.data.claTimeContainer
        //             }
         
        //  },
        // })
     
      },
  
      afterNow(date) {
            return moment(date).add(1, 'days').toDate().getTime() < new Date().getTime()
          },
      	open() {
      			},
      			confirm(e) {
      			},
      change(e) {
        this.startdate =moment(e).weekday(1).format('YYYY-MM-DD')
        this.endDate =moment(e).weekday(7).format('YYYY-MM-DD')
        this.getList()

      },
      maskClick(e){
      				console.log('maskClick事件:', e);
            
              
      			}
    },
    props: {
      beginDate: {
        type: String,
        default: undefined
      },

      deptId: {
        type: String,
        default: undefined
      },
      claId: {
        type: String,
        default: undefined
      },
      studentId: {
        type: String,
        default: undefined
      },
      teacherId: {
        type: String,
        default: undefined
      },
      // 是否只读(只能看 不能改)
      readonly: {
        type: Boolean,
        default: false
      },
      // 是否允许记上课
      canClaTimeAttend: {
        type: Boolean,
        default: false
      },
      // 是否允许添加排课规则
      addTimeRule: {
        type: Boolean,
        default: false
      },
      // 是否需要输入 学生编号 参数
      needStudentIdParam: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showmode:false,
          claTime:[],
        startdate: moment(new Date()).weekday(1).format('YYYY-MM-DD'),
        endDate:moment(new Date()).weekday(7).format('YYYY-MM-DD'),
        show: false,
        mode: 'date',
        columnTitles: [],
        claTimeContainer: [],
        showMoreData: false,
        moreData: [],
        loading: false,
        weekBeginDatePickerOptions: {
          disabledDate(time) {
            return moment(time).weekday() !== 1
          }
        },
        calendarBeginDate: '',
        calendarEndDate: '',

        // 已选择排课
        chooseCourseTimeId: undefined
      }
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" >
  $claTimeColumnWidth: 125px;
  $claTimeColumnHeight: 46px;
  $Padding8: 8px;
    html,
    body {
      overflow-x: hidden;
      margin: 0 auto; /* 居中显示 */
    }
  	.example-body {
      display: flex;
        justify-content: space-between;
  		background-color: #fff;
  		padding: 10px;
  	}
/deep/ .u-calendar__action{
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .cla-time-table {
    font-size: 12px;
    border: 1px solid #ebeef5;
    border-right: none;
    border-bottom: none;

    .ths{
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
      padding: $Padding8;
      text-overflow: ellipsis;
      color: #606266;
      font-size: 12px;

      .week {
        width: $claTimeColumnWidth;
        line-height: 35px;
      }

      .time {
        width: 80px;
        line-height: 35px;
      }
    }
  }

  .overflow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }

.cells {
  
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    text-overflow: ellipsis;
    text-align: center;
    color: #606266;
    
    .time {
      font-weight: 500;
      min-height: 80px;
      align-items: center;
      display: flex;
      justify-content: center;
    }}
  .cell {
        display: table-cell;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    text-overflow: ellipsis;
    text-align: center;
    color: #606266;

    .time {
      font-weight: 500;
      min-height: 80px;
      align-items: center;
      display: flex;
      justify-content: center;
    }

    &:last-child .cla-time-item-container .cla-time-item {
      .tooltip {
        left: - ($claTimeColumnWidth + $Padding8 * 2);
      }
    }

    // 每个课程
    .cla-time-item-container {
      margin-top: 1px;
      width: $claTimeColumnWidth + $Padding8 * 2;

      &:first-child {
        margin-top: 0px;
      }

      .cla-time-item {
        height: $claTimeColumnHeight;
        cursor: pointer;
        position: relative;
        font-size: 12px;
        padding: 5px $Padding8;
        line-height: 1.5;
        text-align: left;

        &.success {
          background-color: #67C23A;
          color: #fff;
          ;
        }

        // 右上角 角标
        .right-top-tag {
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;

          .claTimeStatus {
            transform: rotate(45deg);
            height: 16px;
            font-size: 12px;
            line-height: 16px;
            position: absolute;
            right: -14px;
            top: 3px;
            width: 50px;
            text-align: center;
            background-color: #F56C6C;
            color: #fff;

            span {
              display: inline-block;
              transform: scale(0.7, 0.7);
            }

            &.success {
              background-color: #67C23A;
              color: #fff;
            }
          }
        }

        .tooltip {
          z-index: 2;
          position: absolute;
          top: 0;
          left: $claTimeColumnWidth + $Padding8 * 2;
          background-color: rgb(73, 87, 105);
          color: #fff;
          width: $claTimeColumnWidth + $Padding8 * 2;
          border-radius: 2px;
          display: none;

          .content {
            line-height: 1.5;
            padding: 10px;

            .title {
              font-size: 14px;
              font-weight: bolder;
              padding: 8px 0;
              
            }

            .item {
              display: flex; flex-direction: row; justify-content: space-between;
              margin-top: 5px;
            }
          }
        }

        .mask {
          z-index: 2;
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          background-color: #333;
          opacity: 0.6;
          height: $claTimeColumnHeight;
          width: 100%;

          .options {
            align-items: center;
            display: flex;
            justify-content: center;
            color: #fff;
            height: 100%;

            span {
              padding: 0 5px;
            }

            span:hover {
              text-decoration: underline;
            }
          }
        }

        &:hover {

          .tooltip,
          .mask {
            display: block;
          }
        }
      }
    }


  }
  .text {
  		font-size: 12px;
  		color: #333;
  	}
  .popup-content {
      display: flex;
  		align-items: flex-start;
  		justify-content: center;
  		padding: 15px;
  		height: 150px;
      width: auto;
  		background-color: #fff;
    flex-direction: column
  	}
</style>